<style>
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .AngularBox {
    width: 400px;
    /* background-color: red; */
  }

  .title {
    background-color: #CCCCCC;
    text-align: center;
    font-size: 18px;
    padding: 10px;
  }

  .searchBox {
    background-color: #F5F6F6;
    text-align: center;
    padding: 20px 10px;
    display: flex;
    justify-content: space-between;
  }

  .searchBox input {
    width: 75%;
  }

  button {
    padding: 5px 20px;
    color: red;
  }

  .lists {
    padding: 20px;
    border: 1px solid #0A003D;
    border-radius: 10px;
  }

  .lists ul li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
</style>

<div class="box">
  <div class="AngularBox">
    <div class="title">
      Angular TodoList
    </div>
    <div class="searchBox">
      <input type="text" [(ngModel)]="username">
      <button (click)="change()">添加</button>
    </div>

    <div class="lists">
      <ul>
        <li *ngFor="let item of list;let i = index;">
          <div class="checkboxName">
            <input name="Fruit" type="checkbox" value="" />
            {{item.name}}
          </div>
          <button (click)="remove(i)">删除</button>
        </li>
      </ul>
    </div>
  </div>
</div>